<template>
	<m-layout class="withdraw-box" title="提取">
		<m-text slot="right" @click="Jump('/pagesA/wallet/withdraw/recode/recode')" >提取记录</m-text>
		<my-bank v-model="id"></my-bank>
		<m-block gap="28 30" spa="20 0 0">
			<view class="h1-title">
				<text>提取金额</text>
			</view>
			<view class="m-input2">
				<m-input v-model="amount" placeholder="请输入提取金额">
					<text class="input-right" slot="right" @click="amount = usable">全部提取</text>
				</m-input>
			</view>
			<view class="blance-box flex-between">
				<text>可用余额：{{usable}}</text>
				<text>手续费：{{fee}}</text>
			</view>
			<m-block gap="36 30" spa="30 0 0" bgColor="#F7F7F7">
				<view class="hint-2">
					注意：
				</view>
				<view class="hint-3">
					1. 姓名、身份证号码、银行卡号、电话号码必须一致
				</view>
				<view class="hint-3">
					2. 收款人年龄男性不得大于60周岁，女性55岁
				</view>
				<view class="hint-3">
					3.单人打款最低不能低于{{tFee}}元,不要超过或者等于5万，
				</view>
				<view class="hint-3">
					4. 每人/每月提现限额90000元，若超出金额，可预留多个银行卡收款（其他银行卡需非本人持卡）
				</view>
			</m-block>
		</m-block>

		<template>
			<template v-if="nowCoinConfig['isout'] == 1">
				<m-button block spa="100 0 0" @click="verify" :loading="isLoading">提取</m-button>
			</template>
			<template v-else>
				<m-button block type="disabled" spa="100 0 0">暂未开放</m-button>
			</template>
			<!-- <m-button block spa="20 0 0" @click="Jump('/pagesA/wallet/withdraw/recode/recode')" hollow>提取记录</m-button> -->
		</template>

		<m-pay v-model="payShow" @handleConfirm="WithdrawApply" :loading="isLoading" title="提示" border="0"></m-pay>
	</m-layout>
</template>

<script>
	import { balance } from '@/api/Users.js'
	import { WithdrawApply } from '@/api/Trade.js'
	import { mapState } from 'vuex'
	export default {
		data() {
			return {
				payShow: false,
				isLoading: false,
				coinid: 1,
				id: '',
				amount: '',
			};
		},
		computed: {
			...mapState({
				enum: state => state.general.enum,
				config: state => state.general.config,
				userbalance: state => state.user.userbalance,
				userinfo: state => state.user.userinfo,
				coinconfig: state => state.general.coinConfig,
			}),
			coinanme() {
				return this.enum['Coin']
			},
			nowCoinConfig() {
				return this.coinconfig[this.coinid]
			},
			usable() {
				const a = this.userbalance[this.coinid]['balance']
				return a <= 0 ? 0 : a
			},
			//起提数
			tFee() {
				return this.nowCoinConfig['minout']  || 0
			},
			//手续费
			fee() {
				//配置的手续费
				const fees = this.nowCoinConfig['feeout']
				return this.times(fees, this.amount)
				// usdt手续费
				if (this.coinId == 1) {
					if (this.count <= 100) {
						return 1
					} else {
						return this.times(this.count, fees)
						// return this.times(, this.count) 
					}
				} else {
					return this.times(fees, this.count)
				}
			},
		},
		onLoad({ coinid }) {
			balance();
			this.coinid = coinid || 1;
		},
		methods: {
			verify() {
				if (!this.id) {
					return this.Toast('请选择提取银行卡')
				}
				if (!this.amount) {
					return this.Toast('请输入提取金额')
				}
				if (Number(this.amount) < Number(this.tFee)) {
					return this.Toast('提现金额不低于'+this.tFee)
				}
				this.payShow = true;
			},
			async WithdrawApply({ pwd, vcode }) {
				this.isLoading = true;
				const { success, msg } = await WithdrawApply({
					amount: this.amount,
					coinid: this.coinid,
					bankcardid: this.id,
					paypassword: pwd,
					code: vcode,
				})
				this.isLoading = false;
				this.Toast(msg)
				if (success) {
					this.payShow = false;
					this.amount = '';
				}
			}
		},
	}
</script>

<style lang="scss">
	.withdraw-box {
		// background: url('../../../static/images/pages/wallet/withdeawbg.png') no-repeat;
		background-size: 750rpx 500rpx;
	}

	.block1 {
		&>view:nth-of-type(1) {

			// padding-bottom: 33rpx;
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333;
			}

			view {}
		}

		.right {
			border-radius: 19rpx;

			text:nth-of-type(1) {
				margin-right: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: var(--text_thenme);
			}

			text:nth-of-type(2) {
				display: inline-block;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: var(--text_thenme);
			}
		}
	}

	.h1-title {
		padding-bottom: 20rpx;

		text:nth-of-type(1) {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}

		text:nth-of-type(2) {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: var(--text_thenme);
		}
	}

	.m-input2 {
		/deep/ .m-input {
			input {
				font-size: 34rpx;
			}
		}

	}

	.input-right {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: var(--theme);
	}

	.blance-box {
		padding-top: 35rpx;
		padding-bottom: 50rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: var(--theme);
	}

	.bank-box {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;

		.left {}

		.right {}
	}

	.hint-2 {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.hint-3 {
		padding-top: 15rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.btn-box {

		left: 0;
		bottom: 0;
		width: 100%;
		box-sizing: border-box;
	}
</style>